<template>
    <!-- 返回导航 -->
    <van-nav-bar
    title="订单详情"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
    />
    <div>
        <p>
            下单日期： {{ orderDeatil.date }}
        </p>
        <p>
            下单编号： {{ orderDeatil.number }}
        </p>
    </div>
    <div class="goods-warpper">
        <van-swipe-cell v-for="item in goodsInfo" :key="item.id">
      <van-card
        :price="(item.price*item.num).toFixed(2)"
        :title="item.product"
        style="margin-bottom:10px;background-color:#fff"
        
        >
        <!-- :desc="item.category_id" -->
      <template #desc>
          类型： {{ item.category_id==1?'早餐':item.category_id==2?'午餐':item.category_id==3?'晚餐':'其他' }}
      </template>
      <template #thumb>
                  <div class="g-thumb">
                      <van-image :src="'http://localhost:3000/test/pic?img='+item.img_url" width="50%"></van-image>
                  </div>
      </template>
      <template #footer>
         X{{item.num}}
      </template>
  </van-card>
  </van-swipe-cell>
    </div>
</template>

<script lang="ts" setup>
import axios from 'axios'
import {useRoute} from 'vue-router'
import { ref,onMounted } from 'vue'
import { useSearchFn} from '@/hooks/search'
const {onClickLeft} = useSearchFn()

const route = useRoute()

let orderId = ref()
let orderDeatil = ref({})
let userInfo  = ref({})
let goodsInfo = ref([])


const getOrderDetail = async (id)=>{

    const res = await axios({
        method: 'get',
        url: 'http://localhost:3000/goods/orderdetail',
        //post请求参数使用data选项, get参数 params选项
        params: {
            id
        }
    })
    const {code,info} = res.data
    if(code === 1 ){
        orderDeatil.value = info.list[0]
    }
    userInfo.value = JSON.parse(orderDeatil.value.user_ad_info)
    goodsInfo.value = JSON.parse(orderDeatil.value.goods_info)
    console.log(orderDeatil.value)
    console.log(orderDeatil.value.date)
    // console.log(JSON.parse(orderDeatil.value.goods_info))
    // console.log(JSON.parse(orderDeatil.value.user_ad_info))
    testFn()
}

const getOrderId = async ()=>{
    orderId.value = route.query.id
    console.log(`orderId.value>>>`,orderId.value);
    
}


const classObj = ref({
    'class-a': true,
    'class-b': false,
    'class-c': false,
    'class-d': false,
})

const testFn = ()=>{
    classObj.value['class-a'] = false
    classObj.value['class-b'] = false
    classObj.value['class-c'] = false
    classObj.value['class-d'] = false

    if(orderDeatil.value.order_state == 0) classObj.value['class-a'] = true
    if(orderDeatil.value.order_state == 1) classObj.value['class-b'] = true
    if(orderDeatil.value.order_state == 2) classObj.value['class-d'] = true
    if(orderDeatil.value.order_state == 3) classObj.value['class-c'] = true
}

onMounted(() => {
    getOrderId()
    getOrderDetail(orderId.value)
})
</script>

<style lang="scss" scoped>
.bigrow {
    padding-left: 100px;
    padding-right: 100px;
    .el-row{
        // padding-left: 20px;
    }
    .class-a{
        padding-left: 30px;
        color: #FF6263;
    }
    .class-b{
        padding-left: 30px;
        color: #F59F34;
    }
    .class-c{
        padding-left: 30px;
        color: green;
    }
    .class-d{
        padding-left: 30px;
        color: #00A0FF;
    }
    .spanel{
        color: gray;
        padding-left: 30px;
        margin-top: 15px;
        margin-bottom: 15px;
    }
    .totalPrice{
        display: flex;
        justify-content: flex-end;
        width: 100%;
        span{
            color: #FF6263;
        }
    }
    .row1{
        padding: 10px;
        padding-left: 0px;
        padding-right: 30px;
        box-sizing: border-box;
        width: 100%;
        background-color: #f1f6fc;
        height: 75px;
        display: flex;
        align-items: center;
        color: #FF6263;
        justify-content: space-between;
        .spanState{
            padding-left: 30px;
        }
    }
    .row2,.row3{
        width: 100%;
        display: flex;
        .divbox{
            width: 16.6%;
            .top{
                height: 35px;
                background-color: #f1f6fc;
                border: 1px solid #e6e6e6;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .bottom{
                height: 55px;
                color: gray;
                border: 1px solid #e6e6e6;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
    .row3{
        .divbox{
            width: 25%;
        }
    }
}
.goods-warpper{
    background-color: rgb(245,245,245);
    padding-top: 10px;
  }
</style>
